<template>
  <el-form ref="deptForm" label-width="120px" :model="form" :rules="formRules">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option :value="item.username" :label="item.username" v-for="item in list" :key="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
    import {getEmployess} from '@/api/employess'
    import {AddDepartments,getDepartmentsDetail,updateDepartmentsDetail} from '@/api/departments'
export default {
  props:{
    id:{
      type:String,
      required:true
    },
    isEdit:{
      type:Boolean,
      required:true
    },
    originList:{
      type:Array,
      required:true
    }
  },
    data() {
      const validName = (rule,value,callback)=>{
        console.log(this.originList);
        let exlistName = this.originList.filter(item => item.id === this.id).map(item => item.name)
        if(this.isEdit){
          const pid = this.originList.find(item => item.id === this.id).pid
          console.log(this.originList.find(item => item.id === this.id).pid);
          const borther = this.originList.filter(item => item.pid === pid)
          exlistName = borther.filter(item => item.id !== this.id).map(item => item.name)
        }
        if(exlistName.includes(value)){
          callback(new Error(`该部门名称已存在${value} 请换一个`))
        }else{
          callback()
        }
      }
       const validCode = (rule,value,callback)=>{
        let exlistCode = this.originList.map(item => item.code)
        console.log(exlistCode);
        if(this.isEdit){
          exlistCode = this.originList.filter(item => item.id !== this.id).map(item => item.code)
        }
        if(exlistCode.includes(value)){
          callback(new Error(`该部门编号已存在${value}请换一个一个`))
        }else{
          callback()
        }
       }
        return {
            list:[],
            form:{
               name:'',
               code:'',
               manager:'',
               introduce:'' 
            },
            formRules:{
              name:[
                {required:true,message:'请输入部门名称',trigger:'blur'},
                {min:1,max:50,message:'请输入1-50的部门名称',trigger:'blur'},
                {validator:validName,trigger:'blur'}
              ],
              code:[
                {required:true,message:'请输入部门编码',trigger:'blur'},
                {min:1,max:50,message:'请输入1-50的部门编码',trigger:'blur'},
                {validator:validCode,trigger:'blur'}
              ],
              manger:[
                {required:true,message:'请输入部门负责人',trigger:'blur'}
              ],
              introduce:[
                {required:true,message:'请输入部门介绍',trigger:'blur'},
                {min:1,max:300,message:'请输入1-300的部门介绍',trigger:'blur'}
              ]
            }
        }
    },
    created(){
        this.loadEmployess()
        if(this.isEdit){
          this.loadDepartmentsDetail()
        }
    },
    methods:{
      resetForm(){
        this.$refs.deptForm.resetFields()
      },
      async loadDepartmentsDetail(){
        const res = await getDepartmentsDetail(this.id)
        this.form = res.data
      },
      // 实现编辑功能
      async doEdit(){
        try {
          const res = await updateDepartmentsDetail(this.form)
          this.$message.success(res.message)
          this.$emit('success')
        } catch (error) {
          console.log(error);
        }
      },
      // 实现添加子部门
      async doAdd(){
      try {
        const res = await AddDepartments({pid:this.id,...this.form})
        this.$message.success(res.message)
        console.log(res);
        this.$emit('success')
      } catch (error) {
        console.log(error);
      }
      },
        async loadEmployess(){
            try{
                const res = await getEmployess()
                console.log(res);
                this.list = res.data
            }catch(error){
                console.log(error);
            }
        },
        hSubmit(){
          this.$$refs.deptForm.validate(valid=>{
            if(!valid) return
            this.isEdit ? this.doEdit() :this.doAdd()
          })
        },
        hCancel(){
          this.$emit('success')
        }
    }

}
</script>

<style>

</style>